<template>
  <div>
    <el-card>
<!--    面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/cscindex' }">客户服务中心</el-breadcrumb-item>
      <el-breadcrumb-item>客户管理</el-breadcrumb-item>
      <el-breadcrumb-item>客户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <!--      搜索区-->
    <el-select v-model="queryType" placeholder="请选择" size="mini" style="float:left">
        <el-option v-for="item in options" :key="item.value" :label="item.lable" :value="item.value">
        </el-option>
    </el-select>
    <el-row style="float:left;margin-left:5px;">
      <el-col :span="15">
        <el-input placeholder="请输入需要查询的相关信息" v-model="clientInfo"  clearable @clear="getList" size="mini">
        </el-input>
      </el-col>
      <el-col :span="3" style="margin-left: 5px">
        <el-button type="primary" @click="selected" size="mini">搜索</el-button>
      </el-col>
    </el-row>
    <br>
    <br>
<!--    表格-->
    <el-table :data="tableData.slice((pageInfo.curPage-1)*pageInfo.pagesize,pageInfo.curPage*pageInfo.pagesize)" border stripe style="width: 100%">
      <el-table-column fixed prop="id" label="客户编号" width="80"></el-table-column>
      <el-table-column  label="客户姓名" width="130">
        <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input size="mini" v-model="editdata.name" placeholder='请输入名称' class="must_input"></el-input>
            </span>
            <span v-else>{{ scope.row.name}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="phone" label="移动电话" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input size="mini" v-model="editdata.phone" placeholder='请输入名称'></el-input>
            </span>
            <span v-else>{{ scope.row.phone}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱号码" width="200" >
           <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input size="mini" v-model="editdata.email" placeholder='请输入名称'></el-input>
            </span>
            <span v-else>{{ scope.row.email}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="emailNumber" label="邮编" width="100">
           <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input size="mini" v-model="editdata.emailNumber" placeholder='请输入名称'></el-input>
            </span>
            <span v-else>{{ scope.row.emailNumber}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="address" label="联系地址" width="300">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input size="mini" v-model="editdata.address" placeholder='请输入名称'></el-input>
            </span>
            <span v-else>{{ scope.row.address}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="employer" label="工作单位" width="300">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input size="mini" v-model="editdata.employer" placeholder='请输入名称'></el-input>
            </span>
            <span v-else>{{ scope.row.employer}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="landline" label="座机" width="120">
            <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input size="mini" v-model="editdata.landline" placeholder='请输入名称'></el-input>
            </span>
            <span v-else>{{ scope.row.landline}}</span>
          </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="210">
        <template slot-scope="scope">
          <router-link :to="{ path: '/clientDetail'}">
            <el-button type="primary" size="small" @click="selectview(scope.row)">查看</el-button>
          </router-link>
          <span v-if="scope.row.isSet">
            <el-button @click="save(scope.row,scope.$index)" type="success" size="small" style="margin-left:10px">
              保存
            </el-button>
              <el-button type="primary" size="small" @click="noEdit(scope.row,scope.$index)">取消</el-button>
          </span>
          <span v-else>
            <el-button @click="edit(scope.row,scope.$index)" type="success" size="small" style="margin-left:10px">
              编辑
            </el-button>
            <el-button type="danger" size="small"  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
<!--    分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.curPage"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="pageInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background>
        </el-pagination>
    </el-card>
  </div>
</template>
<script>
    export default {
      name:'clientlist',
        data(){
            return{
                // 搜索输入
                clientInfo:'',
                // 选择的值
                queryType:'',
                // 选择
                options:[
                    {
                    value:'0',
                    lable:'客户ID'
                    },
                    {
                    value:'1',
                    lable: '客户名称'
                    }
                ],
                // 表格数据
                tableData: [],
                // 分页
                pageInfo: {
                    query:'',
                    curPage:1,
                    pagesize:5
                },
                // 表格总数
                total:0,
                // 删除id
                deleteid:'',
                // 编辑后数据
                editdata:{
                  address:'',
                  email:'',
                  emailNumber:'',
                  employer:'',
                  id:'',
                  landline:'',
                  name:''
                },
                isedit:false,
                iseditindex:''  
           }
        },
        methods: {
          // 获取数据
            async getList() {
                const { data: res } = await this.$http
                    .get('/api/client_server/query_client_pageInfo')
                    .catch(err => {
                        this.$message.error('对不起，服务器异常或没有权限！请多试几次')
                        console.log(err.message)
                    })
                if (res.code !== 200) {
                    this.$message.error('获取流动表信息失败')
                }
                // console.log(res)
                this.pageInfo.query=res.data
                this.tableData=res.data
                let result = res.data
                this.tableDate = result.map(item=>{
                  item.isSet = false
                  console.log(item);
                  return item
                })
                console.log(res);
                this.total=res.total
            },
            // 通过id删除
            async deletecustom(){
              const id=this.deleteid
              const{ data: res}=await this.$http
              .get(`/api/client_server/delete_client/${id}`)
              .catch(err => {
                  this.$message.error('对不起，服务器异常或没有权限！请多试几次')
                        console.log(err.message)
               })
                if (res.code !== 200) {
                    this.$message.error('删除失败')
                }else{
                  this.$message.success('删除成功')
                  this.getList()
                }
                // this.tableData.$remove()
            },
            // 查找
          async selectbyidorname() {
            var queryType=this.queryType
            if(queryType==='0'){
              queryType='客户ID'
            }else{
              queryType='客户名称'
            }
            const clientInfo=this.clientInfo
            // console.log(typeof clientInfo)
            // console.log(typeof queryType)
            const { data: res } = await this.$http
            .get(`/api/client_server/query_client/${queryType}/${clientInfo}`)
            .catch((err) => {
              this.$message.error('对不起，服务器异常或没有权限！请多试几次')
              console.log(err.message)
            })
            var count=0
            if (res.code===200) {
              if(res.data[0]===null||res.data.length===0){
                this.$message.error('无相关信息！')
              }else{
                this.tableData=[]
                res.data.forEach(item => {
                  this.tableData[count]=item
                  count++
                });
                console.log(this.tableData)
                this.total=this.tableData.length
              }
            }
          },
          // 修改数据
          async editbyid(){
            const{data:res}=await this.$http
            .post('/api/client_server/update_client',{
              address:this.editdata.address,
              email:this.editdata.email,
              emailNnumber:this.editdata.emailNumber,
              employer:this.editdata.employer,
              id:this.editdata.id,
              landline:this.editdata.landline,
              name:this.editdata.name,
              phone:this.editdata.phone
            })
            .catch((err) => {
              this.$message.error('对不起，服务器异常或没有权限！请多试几次')
              console.log(err.message)
            })
            console.log(res)
            if (res.code===200) {
              return this.$message.success('修改成功！')
            } else {
              return this.$message.error('修改失败！')
            }
          },
          // 分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageInfo.pagesize=val
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageInfo.curPage=val
            },
            // 搜索
            selected(){
              if(this.queryType===''){
                return this.$message.error('请选择关键词')
              }else if(this.queryType==='0'&&Number(this.clientInfo)){
                this.selectbyidorname()
              }else if(this.queryType==='1'&&this.clientInfo!==''){
                this.selectbyidorname()
              }else{
                this.$message.error('查询客户ID仅可输入数字类型！')
              }
              if(this.input===''){
                this.getList()
              }
            },
            // 删除用户
            handleDelete(index, row) {
              // console.log(index, row)
              this.deleteid=row.id
              this.deletecustom()
              this.$forceUpdate()
            },
            // 取消编辑
            noEdit(row,index){
              this.editdata.address=''
              this.editdata.email=''
              this.editdata.emailNumber=''
              this.editdata.employer=''
              this.editdata.phone=''
              this.editdata.landline=''
              var newindex=0
              newindex=((this.pageInfo.curPage-1)*this.pageInfo.pagesize)+index
              this.tableData[newindex].isSet=false
              this.$forceUpdate()
              // return this.$set(this.tableData[index],'isSet',false)
            },
            //编辑
            edit(row,index){
              console.log(row)
              var newindex=0
              newindex=((this.pageInfo.curPage-1)*this.pageInfo.pagesize)+index
              this.tableData[newindex].isSet=true
              this.$forceUpdate()
              // return this.$set(this.tableData[index],'isSet',true)
            },
            //保存
            save(row,index){
              this.editdata.id=row.id
              if(this.editdata.address===''||this.editdata.email===''||this.editdata.name===''||this.editdata.phone===''){
                this.$message.error('必填信息未填写完成请检查再提交!')
              }else{
                var newindex=0
                newindex=((this.pageInfo.curPage-1)*this.pageInfo.pagesize)+index
                this.tableData[newindex].isSet=false
                this.editbyid()
                this.getList()
                this.$forceUpdate()
              }
            },
            //查看详情
            selectview(row){
              console.log(row.id);
              window.sessionStorage.setItem('customid',row.id)
            }
        },
        created() {
            this.getList()
        }
    }
</script>

